<template>
    <div class="box">
        <el-form :model="form" 
        status-icon 
        :rules="rules" 
        ref="form" 
        label-width="100px" 
        class="demo-form">
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
        
            <el-form-item>
                <el-button type="primary" class="login-sub" style="background:#892700" @click="loginTodo">登录</el-button>
            </el-form-item>
        </el-form>

         <div class="sliding" v-show="flag">
             <slide-verify 
                ref="slideblock"
                @again="onAgain"
                @fulfilled="onFulfilled"
                @success="onSuccess"
                @fail="onFail"
                @refresh="onRefresh"
                :accuracy="accuracy"
                :slider-text="text"
            ></slide-verify>
            <div>{{msg}}</div>
        </div>

    </div>
</template>
<script>
 import {loginAjax} from "@/api"
  export default {
    data() {
      return {
          msg: '',
            text: '向右滑',
            accuracy: 1,
            form:{},
            flag:false,
        rules: {
            mobile:[
                {required: true, message: '请输入手机号码', trigger: 'blur' },
                {
                    validator:(rule,value,callback)=>{
                        var pass = /^1(3|4|6|7|8|9)\d{9}$/
                        if(pass.test(value)){
                            callback()
                        }else{
                            callback(new Error("请输入正确的手机号"))
                        }
                    },trigger:"blur"
                }  
            ],
            password:[
                {required: true, message: '请输入密码', trigger: 'blur' },
                 {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
            ],
        }
      };
    },
   methods:{
       loginTodo(){
           this.$refs.form.validate(valid=>{
                if(valid){
                    this.flag = true
                }else{
                    this.$message.error("请填写用户或密码")
                }
            })
       },
        onSuccess(times){
            loginAjax(this.form)
            .then(res=>{
                if(res.type){
                    localStorage.setItem("mobile",this.form.mobile)
                    sessionStorage.setItem("token",res.token)
                    this.$router.push({name:"index"})
                }else{
                    this.handleClick()
                }
                this.flag = false
            })
             
        },
        onFail(){
            console.log('验证不通过');
            this.msg = ''
        },
        onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦！');
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
        	// 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
   },
   mounted(){
    //    if(localStorage.getItem("mobile")){
    //        this.form.mobile = localStorage.getItem("mobile")
    //    }
   }
  }
</script>

<style lang="scss" scoped>
        .box{
            width: 450px;
            height: 400px; 
        }
        .sliding{
            width: 450px;
            height: 350px;
            background:rgba(0,0,0,.6);
            position: absolute;
            top: 0;
        }
     ::v-deep  .slide-verify{
            margin:60px auto;
        }
    .demo-form{
        width: 350px;
        margin-top: 25px;
        text-align: center;
       
    }
    .login-sub{
       border: 0;
    }
</style>